<script setup>
import { introApi } from "@/services/index";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { nextTick, ref, watch, onMounted } from "vue";
import { appInfo, loginSwitch } from "@/services/user";
import { appCategory, brand } from "@/services/goods";
import Index from "../home/index.vue";
import { stockCounterStore } from "@/stores/stock";

const stockObj = stockCounterStore();

onLoad((e) => {
  const topHeight = ref(uni.getStorageSync("topHight") || 0);
  code.value = e.code;
  // getList();
  getAppCategory();
});

const form = ref({
  name: "",
  pageIndex: 1,
  pageSize: 9999,
});

const newCategoryList = ref([]);

const getAppCategory = async () => {
  try {
    let res = await brand(form.value);

    res.data.datas.forEach((item, index) => {
      item.select = false;
    });

    newCategoryList.value = res.data.datas;
    // newCategoryList.value = [];
  } catch (e) {
    console.log(e);
  }
};

const code = ref("");
const introData = ref([]);

const getList = async () => {
  try {
    // 发送请求
    let res = await appInfo({});
    if (res.code == 200) {
      introData.value = res.data.employees;
      if (res.data.employees <= 0) {
        uni.redirectTo({
          url: "/pages/cashier/sales_order/index",
        });
      }
    }
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
};
// const selectFun = async (item) => {
//   uni.navigateTo({
//     url: `/pages/cashier/sales_order/index?ids=${
//       item.shopId
//     }&shopName=${decodeURIComponent(item.shopName)}`,
//   });
// };

const goadd = () => {
  let arr = [];
  newCategoryList.value.forEach((item) => {
    if (item.select) {
      arr.push(item);
    }
  });

  console.log(arr);
  stockObj.setSelectDate(JSON.stringify(arr));

  uni.redirectTo({
    url: "/pages/stocktaking/cerate/index",
  });
};
const onClickLeft = () => history.back();
const onClickRight = () => showToast("按钮");

const themeVars = ref({
  navBarIconColor: "#000000",
  navBarTextColor: "#000000",
  navBarBackground: "transparent",
});
const searchFun = () => {
  getAppCategory(1);
};

const openFun = (itemO, index, index2) => {
  let isOpen = itemO.open;

  newCategoryList.value.forEach((item, in1) => {
    if (in1 != index) {
      item.open = false;
    }
  });
  itemO.open = !isOpen;
};

const selectAll = ref(false);

const selectAllFun = () => {
  backFun(newCategoryList.value);

  selectAll.value = !selectAll.value;
};
const backFun = (list) => {
  list.forEach((item) => {
    item.select = !selectAll.value;
    if (item.children) {
      backFun(item.children);
    }
  });
};
const selectFun = (itemO, index, index2, index3) => {
  let isOpen = itemO.select;

  itemO.select = !isOpen;

  if (itemO.select) {
    let arr2 = newCategoryList.value.filter((element) => {
      return element.select == false;
    });
    if (arr2.length <= 0) {
      selectAll.value = true;
    }
  } else {
    selectAll.value = false;
  }
};
//无网状态
const connected = () => {
  getAppCategory();
};
</script>

<template>
  <top-nav
    :title="'选择要进行盘点的品牌'"
    :border="false"
    rType="save"
  ></top-nav>

  <view class="top" :style="'top: calc( 88rpx + ' + topHeight + 'px);'">
    <view class="search-k">
      <up-search
        shape="square"
        placeholder="品牌名称"
        v-model="form.name"
        :showAction="false"
        @search="searchFun"
      ></up-search>
    </view>
  </view>

  <view class="content">
    <view class="select-list">
      <view
        class="select-list-item"
        v-for="(item, index) in newCategoryList"
        :key="index"
      >
        <view
          class="select-list-item-title"
          @click.stop="selectFun(item, index)"
        >
          <view class="left">
            <!-- <image
              class="left-image"
              :class="item.open ? 'left-image2' : ''"
              src="@/static/images/select_j.png"
              mode="widthFix"
            /> -->
            <view class="select" :class="item.select ? 'select2' : ''">
              <image
                v-if="item.select"
                src="@/static/images/select.png"
                mode="scaleToFill"
              />
            </view>
            <text>{{ item.name }}</text>
          </view>
          <view class="right"></view>
        </view>
        <view
          v-if="item.open"
          class="select-list-item2"
          v-for="(item2, index2) in item.children"
          :key="index2"
        >
          <view
            class="select-list-item-title"
            @click="openFun(item2, index, index2)"
          >
            <view class="left">
              <image
                class="left-image"
                :class="item2.open ? 'left-image2' : ''"
                src="@/static/images/select_j.png"
                mode="widthFix"
              />
              <view
                @click.stop="selectFun(item2, index, index2)"
                class="select"
                :class="item2.select ? 'select2' : ''"
              >
                <image
                  v-if="item2.select"
                  src="@/static/images/select.png"
                  mode="scaleToFill"
                />
              </view>

              <text>{{ item2.name }}</text>
            </view>
            <view class="right"></view>
          </view>
          <view
            v-if="item2.open"
            class="select-list-item3"
            v-for="(item3, index3) in item2.children"
            :key="index3"
          >
            <view class="select-list-item-title">
              <view class="left">
                <!-- <image
                  class="left-image"
                  src="@/static/images/select_j.png"
                  mode="widthFix"
                /> -->
                <view
                  @click.stop="selectFun(item3, index, index2, index3)"
                  class="select"
                  :class="item3.select ? 'select2' : ''"
                >
                  <image
                    v-if="item3.select"
                    src="@/static/images/select.png"
                    mode="scaleToFill"
                  />
                </view>
                <text>{{ item3.name }}</text>
              </view>
              <view class="right"></view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <view class="goods_bt">
    <view class="goods_bt_to">
      <view class="bt_left" @click="selectAllFun">
        <view class="select" :class="selectAll ? 'select2' : ''">
          <image
            v-if="selectAll"
            src="@/static/images/select.png"
            mode="scaleToFill"
          />
        </view>
        <text>全选</text>
      </view>

      <up-button
        class="bt_right"
        @click="goadd"
        type="primary"
        color="#1679FB"
        text="下一步"
      ></up-button>
    </view>
  </view>
  <noWork @connected="connected"> </noWork>
</template>

<style lang="scss" scoped>
@import "index.scss";
</style>
